<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>

  <!--
    form表单可以描述一些信息(文本框 单选框 复选框 日期时间 手机号 url 邮箱 等等)
    还可以携带这些信息把数据提交到后台java代码当中进行解析
    form标签也是前后端交互的一个非常重要的手段
  -->

<!--  <center>-->
<!--    <h1>登录</h1>-->
<!--    <form>-->
<!--      用户名：<input type="text" name="username"/><br/>-->
<!--      密码：<input type="password" name="password"/><br/>-->
<!--      <input type="button" value="登录">-->
<!--    </form>-->
<!--  </center>-->

  <center>
      <form>
          <table border="2">
              <caption>注册</caption>
              <tr>
                  <td>用户名：</td>
                  <td><input type="text" name="username" required="required"></td>
                  <td>出生年月：</td>
                  <td><input type="date" name="birth"></td>
              </tr>
              <tr>
                  <td>密码：</td>
                  <td><input type="password" name="password"></td>
                  <td>确认密码：</td>
                  <td><input type="password" name="passwordSure"></td>
              </tr>
              <tr>
                  <td>喜欢的颜色：</td>
                  <td><input type="color" name="color"></td>
                  <td>手机号：</td>
                  <td><input type="tel" name="tel"></td>
              </tr>
              <tr>
                  <td>邮箱：</td>
                  <td><input type="email" name="email" placeholder="xxx@xxx.xxx"></td>
                  <td>个人主页：</td>
                  <td><input type="url" name="url"></td>
              </tr>
              <tr>
                  <td>生辰八字：</td>
                  <td><input type="time" name="time"></td>
                  <td>填写时间：</td>
                  <td><input type="datetime-local" name="registerTime"></td>
              </tr>
              <tr>
                  <td>喜欢的数字：</td>
                  <td><input type="number" name="number" min="1" max="10"></td>
                  <td>评分：</td>
                  <td><input type="range" name="evaluate" min="1" max="5"></td>
              </tr>
              <tr>
                  <td>性别：</td>
                  <td>
                      <input type="radio" name="gender" value="男" checked>男
                      <input type="radio" name="gender" value="女">女
                  </td>
                  <td>爱好：</td>
                  <td>
                      <input type="checkbox" name="hobby" value="篮球" checked>篮球
                      <input type="checkbox" name="hobby" value="足球">足球
                      <input type="checkbox" name="hobby" value="排球">排球
                      <input type="checkbox" name="hobby" value="羽毛球">羽毛球
                      <input type="checkbox" name="hobby" value="网球">网球
                  </td>
              </tr>
              <tr>
                  <td>家庭住址</td>
                  <td>
                      <select name="province">
                          <option value="黑龙江省">黑龙江省</option>
                          <option value="吉林省">吉林省</option>
                          <option value="辽宁省">辽宁省</option>
                          <option value="北京市">北京市</option>
                          <option value="上海市">上海市</option>
                          <option value="河南省">河南省</option>
                      </select>
                  </td>
                  <td>所在城市</td>
                  <td>
                      <select name="city" size="2">
                          <option value="哈尔滨">哈尔滨</option>
                          <option value="齐齐哈尔">齐齐哈尔</option>
                          <option value="牡丹江">牡丹江</option>
                          <option value="佳木斯">佳木斯</option>
                          <option value="大庆">大庆</option>
                          <option value="鸡西">鸡西</option>
                      </select>
                  </td>
              </tr>
              <tr>
                  <td>节假日：</td>
                  <td>
                      <input type="date" list="fesList" name="festival">

                      <datalist id="fesList">
                          <option label="元旦" value="2022-01-01"></option>
                          <option label="劳动节" value="2022-05-01"></option>
                          <option label="国庆节" value="2022-10-01"></option>
                      </datalist>
                  </td>
                  <td>搜索：</td>
                  <td>
                      <input type="search" name="search"/>
                  </td>
              </tr>
              <tr>
                  <td>意见建议：</td>
                  <td colspan="3">
                      <textarea name="suggest" rows="8" cols="20"></textarea>
                  </td>
              </tr>
              <tr>
                  <td colspan="4">
                      <input type="submit" value="注册">
                      <input type="button" value="按钮">
                      <input type="reset" value="重置">
                  </td>
              </tr>
          </table>
      </form>
  </center>

</body>
</html>